<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="handleJump" data-type="BACK">
					<image class="title_bar_left_icon" :src='STATIC_URL+"5.png"'></image>
				</view>
				<view class="title_bar_center">
					<text>使用说明</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#41AF36"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		
		<block v-else>
			<view class="content_info">
				<view class="title_1">1. 下单流程</view>
				<view class="content_1">
					●登录：使用微信小程序搜索“聚肴”，使用库管手机号作为账号，默认密码为123456。
				</view>
				<view class="content_1">
					●下单：进入主页面，选择所需商品，填写数量和配送时间，点击“确定”完成下单。
				</view>
				<view class="title_2">登录：</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/1.png" mode="widthFix"></image>
				</view>
				<view class="title_2">选择商品：</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/2.png" mode="widthFix"></image>
				</view>
				<view class="title_2">加入购物袋：</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/3.png" mode="widthFix"></image>
				</view>
				<view class="title_2">确认下单：</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/4.png" mode="widthFix"></image>
				</view>
				<view class="title_2">补录下单：</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/11.png" mode="widthFix"></image>
				</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/12.png" mode="widthFix"></image>
				</view>
				<view class="title_1">2. 异常申报</view>
				<view class="content_1">
					●用途：用于商品数量与实际收到的数量不符时进行异常报备。
				</view>
				<view class="content_1">
					●操作步骤：
				</view>
				<view class="title_3">■ 进入主页，点击右下角“我的”。</view>
				<view class="title_3">■ 选择“待收货”，点击异常商品进行申报。</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/5.png" mode="widthFix"></image>
				</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/6.png" mode="widthFix"></image>
				</view>
				<view class="title_1">3. 退货申请</view>
				<view class="content_1">
					●用途：用于退货或商品品质问题。
				</view>
				<view class="content_1">
					●操作步骤：
				</view>
				<view class="title_3">■ 进入主页，点击右下角“我的”。</view>
				<view class="title_3">■ 选择“待收货”，点击退货商品进行退货申报。</view>
				<view class="title_3">■ 填写退货数量、备注，并上传图片后提交，等待审核。</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/7.png" mode="widthFix"></image>
				</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/8.png" mode="widthFix"></image>
				</view>
				
				<view class="title_1">4. 确认收货</view>
				<view class="content_1">
					●用途：确认收到商品无误后进行收货。
				</view>
				<view class="content_1">
					●操作步骤：
				</view>
				<view class="title_3">■ 收到商品后，点击订单中的“收货”。</view>
				<view class="title_3">■ 上传收货单据，完成操作。</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/9.png" mode="widthFix"></image>
				</view>
				<view class="content_img">
					<image src="https://www.shiyaocanyin.com/uploadfile/illustrate/10.png" mode="widthFix"></image>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				type: '1',
				content: ""
			}
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
			getData() {
				setTimeout(() => {
					this.isShow = false;
				}, 200)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			border-bottom: 1px solid #eee;
			background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
					.title_bar_left_icon {
						width: 18rpx;
						height: 32rpx;
					}
				}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {
					width: 50rpx;
				}
			}
		}
		.content_info {
			padding: 32rpx 28rpx;
		}
		.title_1 {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 16rpx;
		}
		.title_2 {
			margin-bottom: 16rpx;
			font-size: 28rpx;
			font-weight: 600;
		}
		.title_3 {
			margin-bottom: 16rpx;
			font-size: 28rpx;
			text-indent: 2em;
		}
		.content_1 {
			text-indent: 2em;
			margin-bottom: 16rpx;
		}
		.content_img {
			margin-bottom: 16rpx;
			image {
				width: 100%;
				height: auto;
			}
		}
	}
</style>